<template>
  <el-menu-item-group :index="item.path" v-for="item in list" :key="item.id">
    <el-sub-menu v-if="item.children" :index="item.path" :id="item.id" :style="{'pointer-events': isShowCollapse?'none':''}">
      <template #title>
        <component :is="item.icon" :class="isShowCollapse?'show-icon':'icon'" />
        <span>{{ item.title }}</span>
      </template>
      <submenu v-if="item.children" :list="item.children"></submenu>
    </el-sub-menu>
    <el-menu-item v-else :index="item.path" :id="item.id" :style="{'pointer-events': isShowCollapse?'none':''}">
      <component :is="item.icon" :class="isShowCollapse?'show-icon':'icon'" />
      <template #title>{{ item.title }}</template>
    </el-menu-item>
  </el-menu-item-group>
</template>

<script lang="ts" setup>
const props = defineProps({
  list: Array as any,
  isShowCollapse:Boolean,
})
</script>
<style scoped lang="scss">
.icon {
  width: 20px;
  margin-right: 10px;
}
.show-icon {
  width: 20px;
  margin-right: 3px;
}
</style>
